<template>
  <div>
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-row class="table-head-box">
         <el-col :span="4" class="flex flex-start">
          <el-button type="primary" icon="el-icon-plus"    plain @click="addUserHandler()">添加用户</el-button>
        </el-col>
        <el-col :span="20" class="flex flex-end input-box">
          <el-form-item label="手机号:" prop="mobile">
         <el-input v-model="search.eqParam.mobile" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="姓名:" prop="chinese_name">
         <el-input v-model="search.lkParam.chinese_name" placeholder="姓名"></el-input>
      </el-form-item>
       <el-form-item label="账号名称:" prop="user_name">
          <el-input v-model="search.lkParam.user_name" clearable placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" icon="el-icon-search"  @click="searchUserHandler">查询</el-button>
          
      </el-form-item>
        </el-col>

      </el-row>
      

    </el-form>
    <el-table :data="userList" border style="width: 100%" tooltip-effect="dark" size="mini">
      <el-table-column type="selection" width="55" label="全选">
      </el-table-column>
      <el-table-column  prop="mobile" label="电话">
      </el-table-column>
      <el-table-column  prop="userName" label="账号">
      </el-table-column>
      <el-table-column prop="chineseName" label="姓名">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" >
      </el-table-column>
      <el-table-column prop="type" label="状态">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 0" ><i class="el-icon-warning-outline" size="20" style="color:#5be15b"></i> 冻结状态</div>
          <div v-if="scope.row.status == 1"><i class="el-icon-success" size="20" style="color:#5be15b"></i> 正常</div>
          <div v-if="scope.row.status == 2"><i class="el-icon-delete" size="20" style="color:#5be15b"></i> 已删除</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.userName !='sys'" class="el-icon-edit" type="primary" size="mini" @click="updateUserHandler(scope.$index, scope.row)">编辑</el-button>
          <el-button v-if="scope.row.userName !='sys'" class="el-icon-warning-outline" size="mini" @click="handleClick(scope.$index, scope.row)">授权</el-button>
          <el-button v-if="scope.row.userName !='sys'" class="el-icon-delete" type="danger" size="mini" @click="deleteUserHandler(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-row>
        <el-col :span="24" style="text-align:right;">
            <el-pagination background layout="total,prev, pager, next" :page-count="page.size" :total="page.total" @current-change="sizeChangeHandler"> </el-pagination>
        </el-col>
    </el-row> -->
    <UserAdd :userDialog="showUserDialog" :operateType="operateType" :popUser="user"  v-on:close="closeHandler"></UserAdd>
    <Authorization :dialog="authorizationDialog" :auUserId="userId" v-on:close="closeAuthorizationHandler"></Authorization>
  </div>
</template>
<script>
import {adminListUrl} from '@/utils/common'
import UserAdd from "./account-add";
import Authorization from "./authorization";

export default {
  components: {
    UserAdd,
    Authorization
  },
  data() {
    return {
      userList: [],
      user: null,
      showUserDialog: false,
      authorizationDialog: false,
      userId: null,
      operateType:'add',// 编辑/修改
      search: {
        current:1,
        size:10,
        total: 0,
        lkParam: {userName:""},
        eqParam:{},
      }
    };
  },
  mounted() {
    this.loadUsers();
  },
  methods: {
    addUserHandler: function () {
      this.user = {status:1};
      this.showUserDialog = true;
      this.operateType = 'add'
    },
    updateUserHandler: function (index, row) {
      this.user = row;
      this.user.status = row.status + "";
      this.user.pwd = null;
      // this.user.shopId = row.shopId + "";
      this.showUserDialog = true;
      this.operateType = 'update'
    },
    closeHandler: function () {
      this.showUserDialog = false;
      this.loadUsers();
    },
    closeAuthorizationHandler: function () {
      this.userId = -1;
      this.authorizationDialog = false;
    },
    handleClick: function (index, row) {
      this.userId = row.id;
      this.authorizationDialog = true;
    },
    /**
     * 删除用户
     */
    deleteUserHandler: function (index, row) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" })
        .then(() => {
          this.axios
            .post("/fc/su/del/" + row.userId)
            .then(response => {
                console.log(response)
              this.$message({ type: "success", message: "删除成功!"  });
              this.loadUsers();
            })
            .catch(response => {
                console.log(response)
              this.$message({ type: "warn", message: "删除失败!"  });
            });
        })
        .catch(() => {
          this.$message({ type: "info", message: "已取消删除" });
        });
    },
    loadUsers() {
      this.axios
        .post(adminListUrl, this.search)
        .then(response => {
          var data = response.data.data;
          this.userList = data;
        })
        .catch(response => {
          console.log("response -   " + response);
        });
    },
    sizeChangeHandler: function (value) {
      this.page.current = value;
      this.loadUsers();
    },
    searchUserHandler: function () {
      this.loadUsers();
    }
  }
};
</script>
<style lang="less" scoped>
.grid-content {
  text-align: left;
  height: 45px;
}

</style>
